<template>
  <div>
    <div class="InformationCenter_die">
      <div>
        <div v-for="(item,index) in listArr" :key="index" @click="tabQiehuan(index)">
          <span>{{item.name}}</span>
          <span>(</span>
          <span>{{item.number}}</span>
          <span>)</span>
          <img :src="item.src" alt v-if="item.number>0" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listArr: [
        {
          name: "新消息",
          number: 0,
          src: "http://www.zhaoshengku.net/wx-tuoyuanonexiaoxi.png"
        },
        {
          name: "已读消息",
          number: 0,
          src: ""
        }
      ]
    };
  },
  methods: {
    tabQiehuan(e) {
      var name
      if(e==0){
        name="未读信息"
      }else {
        name = "已读信息"
      }
      wx.navigateTo({
        url: "/pages/notificationMessage/main?id=" + e+"&name="+name
      });
    },
    onShows() {
      wx.getStorage({
        key: "koken",
        success: res => {
          this.headerCode = "Bearer " + res.data;
          wx.request({
            url: "https://api.zhaoshengku.net/index/notice/getnotice",
            method: "post",
            data: {
              pagenum: 2,
              pagesize: 10
            },
            header: {
              Authorization: this.headerCode,
              "X-Requested-With": "xmlhttprequest"
            },
            success: res => {
              // this.allTongz=res.data;
              wx.stopPullDownRefresh();
              this.listArr[0].number = res.data.deCount;
              this.listArr[1].number = res.data.data.total - res.data.deCount;
            },
            fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
          });
        }
      });
    }
  },
  onLoad(option) {},
  onShow() {

    this.onShows();
  },
  mounted() {
    // 设置头
    wx.setNavigationBarTitle({
      title: "信息中心"
    });
  },
  onPullDownRefresh() {
    this.onShows();
  }
};
</script>

<style>
.InformationCenter_die {
  width: 100%;
  box-sizing: border-box;
  background: #eeeeee;
}
.InformationCenter_die > div:nth-child(1) {
  box-sizing: border-box;
  padding: 0 30rpx;
  background: #fff;
  height: 88rpx;
  align-items: center;
}
.InformationCenter_die > div:nth-child(1) > span {
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(219, 219, 219, 1);
}
.InformationCenter_die > div:nth-child(1) > div {
  flex: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  height: 88rpx;
  line-height: 88rpx;
  margin-top: 20rpx;
  box-shadow: 0 0 16rpx 0 rgba(102, 102, 102, 0.35);
  border-radius: 10rpx;
  box-sizing: border-box;
  padding-left: 20rpx;
}
.InformationCenter_die > div:nth-child(1) > .div {
  color: rgba(34, 151, 212, 1);
  border-bottom: 1rpx solid rgba(34, 151, 212, 1);
}
.InformationCenter_die > div:nth-child(1) > div {
  position: relative;
}
.InformationCenter_die > div:nth-child(1) > div > img {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  position: absolute;
  right: 10rpx;
  top: 10rpx;
}
</style>

